<template>
  <div>
    <el-dialog
      title="收藏到指定歌单"
      :visible.sync="dialogVisible"
      :width="dialogWidth"
    >
      <InfoList v-if="playList.length > 0" :list="playList" @clickitem="add">
        <template #img="{ item }">
          <img class="sub-img mleft-10" v-lazy="item.picUrl" />
        </template>
      </InfoList>
      <p v-else>
        <el-link v-if="!this.isLogin" type="warning" href="#/login"
          >您还未登录，请先登录</el-link
        >
        <el-link v-else type="warning">您还未创建歌单，请先创建歌单哦~</el-link>
      </p>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { addSongToPlayList } from "@/api/api_playlist";
import InfoList from "@/components/list/InfoList.vue";
export default {
  components: { InfoList },
  data() {
    return {
      dialogVisible: false,
      playList: [],
    };
  },
  props: {
    musicId: {
      type: Number,
      require: true,
    },
    currentPlayListId: {
      type: String,
      require: true,
    },
  },
  watch: {
    musicId: {
      immediate: true,
      handler() {
        this.playList = this.createPlaylist.filter(
          (item) => item.id !== Number(this.currentPlayListId)
        );
      },
    },
  },

  computed: {
    ...mapState(["isPhone", "isLogin"]),
    ...mapGetters(["createPlaylist"]),
    dialogWidth() {
      return this.isPhone ? "80%" : "400px";
    },
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    async add(item) {
      const pId = item.id;
      const mId = this.musicId;
      if (typeof pId !== "number") {
        return this.$message.warning("请选择一个歌单");
      }

      const res = await addSongToPlayList({ musicId: mId, playlistId: pId });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.dialogVisible = false;
      this.$message.success("收藏成功！");
    },
  },
};
</script>
